<template>
  <!-- 仅退款 -->
  <div
    v-if="refundDetail.applyType === 1 && platInterveneSts ===-1"
    class="steps-box"
  >
    <el-steps
      :active="onlyRefundStepsStatus"
      align-center
      :process-status="onlyRefundProcessStatus"
    >
      <el-step :title="$t('refundOrderDetail.buyerApplyRefund')" />
      <el-step :title="$t('refundOrderDetail.MerchantAgreesRefund')" />
      <el-step :title="$t('order.refundsuccessfully')" />
    </el-steps>
  </div>

  <div
    v-if="refundDetail.applyType === 2 && platInterveneSts ===-1"
    class="steps-box"
  >
    <el-steps
      :active="stepsStatus"
      align-center
      :process-status="refundDetail.returnMoneySts === -1 ? 'error' : 'finish'"
    >
      <el-step :title="$t('refundOrderDetail.BuyerApplyRetPur')" />
      <el-step :title="$t('refundOrderDetail.MerchantAgreesRefund')" />
      <el-step :title="$t('refundOrderDetail.buyerDel')" />
      <el-step :title="$t('refundOrderDetail.MerchantSuccessfulProcessing')" />
      <el-step :title="$t('order.refundsuccessfully')" />
    </el-steps>
  </div>
  <!-- 平台介入 -->
  <div
    v-if="platInterveneSts !==-1"
    class="steps-box"
  >
    <el-steps
      :active="platInterStepsActive"
      align-center
    >
      <el-step :title="$t('refundOrderDetail.buyerApplyRefund')" />
      <el-step :title="'商家已处理'" />
      <el-step
        title="平台介入中"
        :status="platInterveneStepStatus"
      />
      <el-step
        :title="$t('order.refundsuccessfully')"
        :status="platInterveneSts===5?'':'wait'"
      />
    </el-steps>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  refundDetail: {
    type: Object,
    default: () => ({})
  }
})

const onlyRefundStepsStatus = computed(() => {
  let index = 0
  if (props.refundDetail.handelTime) {
    index++
  }
  if (props.refundDetail.cancelTime || props.refundDetail.refundTime || props.refundDetail.rejectTime || props.refundDetail.refundTime || props.refundDetail.rejectTime) {
    index++
  }
  return index
})

const onlyRefundProcessStatus = computed(() => {
  switch (props.refundDetail.returnMoneySts) {
    case 1:
    case 2:
      return 'finish'
    case 5:
      return 'success'
    default:
      return 'error'
  }
})

const stepsStatus = computed(() => {
  let index = 0
  if (props.refundDetail.handelTime) {
    index++
  }
  if (props.refundDetail.shipTime) {
    index++
  }
  // 商家收货
  if (props.refundDetail.receiveTime) {
    index++
  }
  // 商家未收货 同意退款
  if (!props.refundDetail.receiveTime && props.refundDetail.returnMoneySts === 5) {
    index++
  }
  if (props.refundDetail.cancelTime || props.refundDetail.refundTime || props.refundDetail.rejectTime) {
    index++
  }
  return index
})

const platInterveneSts = computed(() => props.refundDetail.platformInterventionStatus || -1) // 平台介入状态
const platInterStepsActive = computed(() => {
  let index = 0
  if (props.refundDetail.handelTime) {
    index++
  }
  if (platInterveneSts.value !== -1) {
    index++
  }
  if (platInterveneSts.value === 3) {
    index++
  }
  if (platInterveneSts.value === 5) {
    index += 2
  }
  return index
})

// 进度条平台介入 平台介入状态 -1.没有介入 1.用户申请介入 2.平台同意介入 3.平台拒绝介入 5.平台同意退款成功
const platInterveneStepStatus = computed(() => {
  switch (platInterveneSts.value) {
    case 1:
      return 'wait'
    case 3:
      return 'error'
    default:
      return 'finish'
  }
})

const getStatus = () => {
  return {
    onlyRefundStepsStatus: onlyRefundStepsStatus.value,
    stepsStatus: stepsStatus.value,
    platInterStepsActive: platInterStepsActive.value
  }
}

defineExpose({
  getStatus
})
</script>

<style scoped>
.steps-box{
  width: 100%;
}
</style>
